<!DOCTYPE HTML>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="武威涛哥的博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="https://jaredtao.github.io">
    <!--SEO-->

    <meta name="keywords" content="Qt,Qml,QtQuick,组件化编程">


    <meta name="description" content="
简介
界面、数据和逻辑分离
Qt内置的Model-View
整数做model
关于delegate
View与Repeater的区别


ListModel
静态ListModel
动态Lis...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->

<title>
    
    Qml组件化编程9-Model和View |
    
    武威涛哥的博客
</title>

    <link rel="alternate" href="/atom.xml" title="武威涛哥的博客" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header"  style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)"  >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='JaredTao'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                <h2> 传承工匠精神 </h2>
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://jaredtao.github.io">武威涛哥的博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/"><i class="fa "></i>首页</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/Qml组件化编程/"><i class="fa "></i>Qml组件化编程</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/Qml特效/"><i class="fa "></i>Qml特效</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/Qt进阶之路/"><i class="fa "></i>Qt进阶之路</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/C-修炼之路/"><i class="fa "></i>C++修炼之路</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/武威故事/"><i class="fa "></i>武威故事</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="Qml组件化编程9-Model和View">
            
	            Qml组件化编程9-Model和View
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            <a class="category-link" href="/categories/Qml组件化编程/">Qml组件化编程</a>
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
                    <a class="tag-link" href="/tags/Qml/">Qml</a> <a class="tag-link" href="/tags/Qt/">Qt</a> <a class="tag-link" href="/tags/QtQuick/">QtQuick</a> <a class="tag-link" href="/tags/组件化编程/">组件化编程</a>
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2019/05/24</span>
        </span>
        
            <span class="fa-wrap">
                <i class="fa fa-eye"></i>
                <span id="busuanzi_value_page_pv"></span>
            </span>
        
    
</div>
            
            
    </div>
    
    <div id="post-gallery">
        
          <img src="/img/avatar.jpg" alt="gallery-img" class="gallery">
        
    </div>

    <div class="post-body post-content">
        <ul>
<li><a href="#%E7%AE%80%E4%BB%8B">简介</a></li>
<li><a href="#%E7%95%8C%E9%9D%A2%E6%95%B0%E6%8D%AE%E5%92%8C%E9%80%BB%E8%BE%91%E5%88%86%E7%A6%BB">界面、数据和逻辑分离</a></li>
<li><a href="#qt%E5%86%85%E7%BD%AE%E7%9A%84model-view">Qt内置的Model-View</a></li>
<li><a href="#%E6%95%B4%E6%95%B0%E5%81%9Amodel">整数做model</a><ul>
<li><a href="#%E5%85%B3%E4%BA%8Edelegate">关于delegate</a></li>
<li><a href="#view%E4%B8%8Erepeater%E7%9A%84%E5%8C%BA%E5%88%AB">View与Repeater的区别</a></li>
</ul>
</li>
<li><a href="#listmodel">ListModel</a><ul>
<li><a href="#%E9%9D%99%E6%80%81listmodel">静态ListModel</a></li>
<li><a href="#%E5%8A%A8%E6%80%81listmodel">动态ListModel</a></li>
</ul>
</li>
<li><a href="#xmllistmodel">XmlListModel</a></li>
<li><a href="#objectmodel">ObjectModel</a></li>
<li><a href="#c%E5%AF%BC%E5%87%BAmodel">C++导出Model</a><ul>
<li><a href="#qlistt">QList<t></t></a></li>
<li><a href="#qjsonarray">QJsonArray</a></li>
<li><a href="#qqmlpropertymap">QQmlPropertyMap</a></li>
</ul>
</li>
<li><a href="#listview%E7%BC%BA%E5%A4%B1%E7%9A%84%E7%81%B5%E9%AD%82">ListView缺失的灵魂</a><ul>
<li><a href="#%E6%90%9C%E7%B4%A2%E4%B8%8E%E6%8E%92%E5%BA%8F">搜索与排序</a></li>
<li><a href="#%E9%80%89%E4%B8%AD">选中</a></li>
<li><a href="#%E6%8B%96%E6%8B%BD">拖拽</a></li>
<li><a href="#%E7%89%B9%E6%95%88">特效</a></li>
</ul>
</li>
</ul>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>本文是《Qml组件化编程》系列文章的第九篇，涛哥将教大家，Qml中Model和View的知识。</p>
<p>注：文章主要发布在<a href="https://jaredtao.github.io">涛哥的博客</a> 和 <a href="https://zhuanlan.zhihu.com/TaoQt" target="_blank" rel="noopener">涛哥的知乎专栏-Qt进阶之路</a></p>
<h2 id="界面、数据和逻辑分离"><a href="#界面、数据和逻辑分离" class="headerlink" title="界面、数据和逻辑分离"></a>界面、数据和逻辑分离</h2><p>界面架构的理念发展的非常快，主要在Web技术的驱动下，就有这么多架构：</p>
<p>MVC、MVP、 MVVM、 Flux、Redux。</p>
<p>涛哥并没有深入的研究过这些架构，但只要抓住一些关键点就够了：界面、数据和逻辑要分别处理，最终要能够正确处理用户输入并显示结果。</p>
<p>(也可能我做的都是小项目，没有参与过大型的Web项目，眼界太低。欢迎大佬指点)</p>
<p>先来看一下Qt中提供的架构：</p>
<p><img src="/images/Qml9/1.png" alt="预览"></p>
<p>Model代表数据，View代表界面，这个Delegate嘛，就是用来定制View的显示方式和Controll的调用，也应该算进View里面去。</p>
<p>这样看来Qt是M-V架构 ? 其实Qt算是MVC架构，这个Controll一般是自己实现的，和Model放在一起的。</p>
<p>不过Qt有信号/槽机制，在QtQuick中以属性绑定的方式出现。信号/槽相当于Gof设计模式中的<a href="https://github.com/jaredtao/DesignPattern/tree/master/code/Behavior/Observer" target="_blank" rel="noopener">观察者模式</a>，也相当于Flux中的订阅/发布模式。</p>
<p>涛哥按自己的实践和理解，画了一个Qt的Model-View架构草图：</p>
<p><img src="/images/Qml9/2.png" alt="预览"></p>
<h2 id="Qt内置的Model-View"><a href="#Qt内置的Model-View" class="headerlink" title="Qt内置的Model-View"></a>Qt内置的Model-View</h2><p>View包括 ListView、TableView、TreeView这三种</p>
<p>(ComboBox也可以算作ListView)</p>
<p><img src="/images/Qml9/4.png" alt="预览"></p>
<p>对应的Model包括 ListModel、TableModel、TreeModel</p>
<p><img src="/images/Qml9/3.png" alt="预览"></p>
<p>Qt提供了一些抽象的Model类，需要自己去继承并实现接口，也有一些可以直接用。</p>
<p>下图是涛哥整理的Qt中model继承关系：</p>
<p><img src="/images/Qml9/5.png" alt="预览"></p>
<p>其中的QStringListModel不是抽象类，可以直接用在ListView中。</p>
<p>QStandardItemModel也不是抽象类，可以直接用在任意一种View中。</p>
<p>在数据量大、有性能要求的地方，需要继承QAbstractItemModel类，重新实现一个model。</p>
<p>对于性能要求不高的数据展示，会有一些更加方便、取巧的方式，接着往下看吧。</p>
<p>(友情提示：涛哥不关心QWidget，只说QtQuick/Qml)</p>
<h2 id="整数做model"><a href="#整数做model" class="headerlink" title="整数做model"></a>整数做model</h2><p>在ListView中，一个整数作为model，就可以创建多个delegate实例。</p>
<p>整数作为model，也可以用在GridView、Combobox、Repeater等需要model的地方。</p>
<p>&lt;Qml组件化编程6-进度条定制&gt;一文中，展示渐变效果，就用的整数作为model</p>
<p><img src="/images/Qml6/Gradiant.gif" alt="预览"></p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.9</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.5</span></span><br><span class="line"></span><br><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line"></span><br><span class="line">    <span class="title">GridView</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> g</span></span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">anchors.margins</span>: <span class="number">20</span></span><br><span class="line">        <span class="attribute">cellWidth</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">cellHeight</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">model</span>: <span class="number">180</span>          <span class="comment">//这里的数据Model直接给个整数180</span></span><br><span class="line">        <span class="attribute">clip</span>: <span class="literal">true</span></span><br><span class="line">        <span class="keyword">property</span><span class="string"> var invalidList</span>: [<span class="number">27</span>, <span class="number">39</span>, <span class="number">40</span>, <span class="number">45</span>, <span class="number">71</span>, <span class="number">74</span>, <span class="number">105</span>, <span class="number">111</span>, <span class="number">119</span>, <span class="number">130</span>, <span class="number">135</span>, <span class="number">141</span>]    <span class="comment">//这几个是不能用的，看过运行报错后手动列出来的。</span></span><br><span class="line">        <span class="attribute">delegate</span>: <span class="title">Item</span>&#123;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">160</span></span><br><span class="line">            <span class="attribute">height</span>: <span class="number">160</span></span><br><span class="line">            <span class="title">Rectangle</span>&#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">150</span></span><br><span class="line">                <span class="attribute">height</span>: <span class="number">150</span></span><br><span class="line">                <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">                <span class="attribute">color</span>: <span class="string">"white"</span></span><br><span class="line">                <span class="attribute">radius</span>: <span class="number">10</span></span><br><span class="line">                <span class="title">Text</span> &#123;</span><br><span class="line">                    <span class="attribute">anchors.horizontalCenter</span>: <span class="built_in">parent</span>.horizontalCenter</span><br><span class="line">                    <span class="attribute">anchors.top</span>: <span class="built_in">parent</span>.top</span><br><span class="line">                    <span class="attribute">anchors.topMargin</span>: <span class="number">2</span></span><br><span class="line">                    <span class="attribute">text</span>: index + <span class="number">1</span></span><br><span class="line">                &#125;</span><br><span class="line">                <span class="title">Rectangle</span> &#123;</span><br><span class="line">                    <span class="attribute">width</span>: <span class="number">100</span></span><br><span class="line">                    <span class="attribute">height</span>: width</span><br><span class="line">                    <span class="attribute">radius</span>:  width / <span class="number">2</span></span><br><span class="line">                    <span class="comment">//编号在列表里的，直接渐变赋值为null，就不会在Qml运行时报警告了</span></span><br><span class="line">                    <span class="attribute">gradient</span>: g.invalidList.indexOf(modelData + <span class="number">1</span>) &lt; <span class="number">0</span> ? modelData + <span class="number">1</span> : <span class="literal">null</span></span><br><span class="line">                    <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">                    <span class="attribute">anchors.verticalCenterOffset</span>: <span class="number">10</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="关于delegate"><a href="#关于delegate" class="headerlink" title="关于delegate"></a>关于delegate</h3><p>简单说一下delegate：</p>
<p>上面GridView的 model设置为180，表示这个View要产生180个相同的构件实例，按照Grid的方式布局排列。</p>
<p>而delegate就相当于是一个模板，用来描述这180个相同的构件长啥样。当然每个实例不可能完全长得一样，我们可以通过</p>
<p>绑定delegate提供的内置属性或其它属性，达到”大同小异”的目的。</p>
<p>delegate中一般会提供一个index和一个modelData，详细的说明需要参考相应的View文档。</p>
<h3 id="View与Repeater的区别"><a href="#View与Repeater的区别" class="headerlink" title="View与Repeater的区别"></a>View与Repeater的区别</h3><p>上面的GridView虽然会创建180个实例，但并不是一次创建全部的，而是只创建能看见的那几个，否则会占用很多CPU、内存和GPU资源。</p>
<p>而Repeater这种就是直接生成180个，并没有做任何内置处理。</p>
<p>(Repeater也可以通过自己控制visible的方式，实现部分创建，后面涛哥有个RingView特效会用这种方式)</p>
<h2 id="ListModel"><a href="#ListModel" class="headerlink" title="ListModel"></a>ListModel</h2><p>Qml提供了ListModel这样的一个封装，可以直接在Qml中定义静态的model</p>
<h3 id="静态ListModel"><a href="#静态ListModel" class="headerlink" title="静态ListModel"></a>静态ListModel</h3><figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.0</span></span><br><span class="line"></span><br><span class="line"><span class="title">ListModel</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> fruitModel</span></span><br><span class="line"></span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Apple"</span></span><br><span class="line">        <span class="attribute">cost</span>: <span class="number">2.45</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ListElement</span> &#123;</span><br><span class="line">        <span class="attribute">name</span>: <span class="string">"Orange"</span></span><br><span class="line">        <span class="attribute">cost</span>: <span class="number">3.25</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后在ListView中使用</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">ListView</span> &#123;</span><br><span class="line">    <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">    <span class="attribute">model</span>: fruitModel</span><br><span class="line">    <span class="attribute">delegate</span>: <span class="title">Item</span> &#123;</span><br><span class="line">        <span class="title">Text</span> &#123;</span><br><span class="line">            <span class="attribute">text</span>: modelData.name</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">Text</span> &#123;</span><br><span class="line">            <span class="attribute">text</span>: cost</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>第一个text通过modelData.name获取到name值</p>
<p>第二个text直接用了cost，其实是modelData.cost省略了modelData。这种写法在静态的ListModel中是可以用的。</p>
<h3 id="动态ListModel"><a href="#动态ListModel" class="headerlink" title="动态ListModel"></a>动态ListModel</h3><p>ListModel还提供了一些动态修改数据的接口:</p>
<p><img src="/images/Qml9/6.png" alt="预览"></p>
<p>像append、 set、insert这些，参数里的jsobject就是js环境中的Object类型，可以参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener">JS手册</a></p>
<p>这里涛哥示例一下，动态添加元素</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="attribute">onClicked</span>: &#123;</span><br><span class="line">    <span class="keyword">var</span> banana = <span class="keyword">new</span> <span class="built_in">Object</span>()</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//或者这样也行，按照js语法即可</span></span><br><span class="line">    <span class="comment">//var bababa = Object.create(null)</span></span><br><span class="line"></span><br><span class="line">    banana[<span class="string">"name"</span>]=<span class="string">"banana"</span> <span class="comment">//方括号 + key的方式设置成员</span></span><br><span class="line">    babana.cost=<span class="number">15</span>  <span class="comment">//点+名字的方式设置成员</span></span><br><span class="line">    </span><br><span class="line">    fruitModel.append(banana)   <span class="comment">//将创建的banana添加到model</span></span><br><span class="line">&#125;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p>更详细的用法，可以参考 涛哥两年前写过的一个<a href="https://github.com/jaredtao/TableEdit" target="_blank" rel="noopener">Qml表格编辑器</a></p>
<p>里面有ListModel的JSON序列化和反序列化、动态增、删、改，Ubuntu风格的查找、Redo、UnDo等大部分功能。</p>
<p>TaoQuick项目的插件机制，也是通过JSON动态添加Model元素。<a href="https://github.com/jaredtao/TaoQuick" target="_blank" rel="noopener">TaoQuick</a></p>
<h2 id="XmlListModel"><a href="#XmlListModel" class="headerlink" title="XmlListModel"></a>XmlListModel</h2><p>处理xml的model，可以方便地使用XPath。</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">XmlListModel</span> &#123;</span><br><span class="line">     <span class="attribute">id:</span><span class="string"> feedModel</span></span><br><span class="line">     <span class="attribute">source</span>: <span class="string">"http://rss.news.yahoo.com/rss/oceania"</span></span><br><span class="line">     <span class="attribute">query</span>: <span class="string">"/rss/channel/item"</span></span><br><span class="line">     <span class="title">XmlRole</span> &#123; <span class="attribute">name</span>: <span class="string">"title"</span>; <span class="attribute">query</span>: <span class="string">"title/string()"</span> &#125;</span><br><span class="line">     <span class="title">XmlRole</span> &#123; <span class="attribute">name</span>: <span class="string">"link"</span>; <span class="attribute">query</span>: <span class="string">"link/string()"</span> &#125;</span><br><span class="line">     <span class="title">XmlRole</span> &#123; <span class="attribute">name</span>: <span class="string">"description"</span>; <span class="attribute">query</span>: <span class="string">"description/string()"</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="ObjectModel"><a href="#ObjectModel" class="headerlink" title="ObjectModel"></a>ObjectModel</h2><p>可视对象的集合，做为model，连Delegate都省了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">import QtQuick 2.0</span><br><span class="line">import QtQml.Models 2.1</span><br><span class="line"></span><br><span class="line">Rectangle &#123;</span><br><span class="line">    ObjectModel &#123;</span><br><span class="line">        id: itemModel</span><br><span class="line">        Rectangle &#123; height: 30; width: 80; color: &quot;red&quot; &#125;</span><br><span class="line">        Rectangle &#123; height: 30; width: 80; color: &quot;green&quot; &#125;</span><br><span class="line">        Rectangle &#123; height: 30; width: 80; color: &quot;blue&quot; &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    ListView &#123;</span><br><span class="line">        anchors.fill: parent</span><br><span class="line">        model: itemModel</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="C-导出Model"><a href="#C-导出Model" class="headerlink" title="C++导出Model"></a>C++导出Model</h2><p>除了以上这些，C++中导出的一些类型也可以作为数据model。</p>
<p>这里的导出包括Q_PROPERTY和 Q_INVOKABLE函数的返回值、槽函数的返回值，以及</p>
<p>setContextProperty注册到上下文的可用作model的类型。</p>
<p>一般使用Q_PROPERTY (本质上也是属性的get函数返回值，在js中做了转换)</p>
<h3 id="QList"><a href="#QList" class="headerlink" title="QList"></a>QList<t></t></h3><p>QList<qstring> 字符串列表，可以直接用，不用多说了。</qstring></p>
<p>QList&lt;QObject*&gt; QObject列表，List中的任意一个QObject有一些属性变更时，都能通知到Qml。</p>
<h3 id="QJsonArray"><a href="#QJsonArray" class="headerlink" title="QJsonArray"></a>QJsonArray</h3><p>QJsonArray也是可以直接导出给ListView用，不过注意是只读的。</p>
<h3 id="QQmlPropertyMap"><a href="#QQmlPropertyMap" class="headerlink" title="QQmlPropertyMap"></a>QQmlPropertyMap</h3><p>QQmlPropertyMap 是一个Map结构, 但是这个结构注册后，Qml中可以直接用”点 + 名字”的方式访问其中的数据</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// create our data</span></span><br><span class="line">QQmlPropertyMap ownerData;</span><br><span class="line">ownerData.insert(<span class="string">"name"</span>, QVariant(QString(<span class="string">"John Smith"</span>)));</span><br><span class="line">ownerData.insert(<span class="string">"phone"</span>, QVariant(QString(<span class="string">"555-5555"</span>)));</span><br><span class="line"></span><br><span class="line"><span class="comment">// expose it to the UI layer</span></span><br><span class="line">QQuickView view;</span><br><span class="line">QQmlContext *ctxt = view.rootContext();</span><br><span class="line">ctxt-&gt;setContextProperty(<span class="string">"owner"</span>, &amp;ownerData);</span><br><span class="line"></span><br><span class="line">view.setSource(QUrl::fromLocalFile(<span class="string">"main.qml"</span>));</span><br><span class="line">view.show();</span><br></pre></td></tr></table></figure>

<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.qml</span></span><br><span class="line"><span class="title">Text</span> &#123; </span><br><span class="line">    <span class="attribute">text</span>: owner.name + <span class="string">" "</span> + owner.phone </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="ListView缺失的灵魂"><a href="#ListView缺失的灵魂" class="headerlink" title="ListView缺失的灵魂"></a>ListView缺失的灵魂</h2><p>Qml这个ListView是残缺不全的，很多功能都要自己实现。</p>
<h3 id="搜索与排序"><a href="#搜索与排序" class="headerlink" title="搜索与排序"></a>搜索与排序</h3><p>前面提到的QSortFilterProxyModel是一种在数据上实现排序和过滤的方法。</p>
<p>还有一种在View层实现搜索和过滤的方式，即DelegateModelGroup。（已经有案例在用，后续再放出代码）</p>
<p>当然Qt5.12的ListView/TableView提供了行和列 隐藏控制的功能，View层做搜索会更方便一些。（还没有实践）</p>
<h3 id="选中"><a href="#选中" class="headerlink" title="选中"></a>选中</h3><p>按住Ctrl 再鼠标点击，多选， 再点击一下反选。</p>
<p>按住Shift再鼠标点击，连选。</p>
<p>旧的QtQuick.Controls 1中也有一个ListView，带SelectonModel功能，直接支持多选、反选。</p>
<p>5.12开始，QtQuick.Controls 1模块被废弃了，而Controls2中的ListView不带这功能了。只能自己记键盘按键来模拟实现。</p>
<p>(顺便吐槽一下，5.12直接把Controls 1的TreeView废掉了，Controls 2又没有TreeView。Controls 1的那个虽然还能用，程序跑起来就是一堆js 异常)</p>
<h3 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h3><p>拖动和放置功能也得自己做。</p>
<h3 id="特效"><a href="#特效" class="headerlink" title="特效"></a>特效</h3><p>ListView提供过度动画，下拉刷新一类的效果很多人已经做了，涛哥就不重复了。</p>
<p>(涛哥正在给TaoQuick开发高级插件TaoEffect，将会包含大量酷炫特效组件，敬请期待)</p>

    </div>
    
        <div class="reward" ontouchstart>
    <div class="reward-wrap">赏
        <div class="reward-box">
            
                <span class="reward-type">
                    <img class="alipay" src="/img/zhifubao.jpg"><b>支付宝打赏</b>
                </span>
            
            
                <span class="reward-type">
                    <img class="wechat" src="/img/weixin.jpg"><b>微信打赏</b>
                </span>
            
        </div>
    </div>
    <p class="reward-tip">赞赏是不耍流氓的鼓励</p>
</div>


    
    <div class="post-footer">
        <div>
            
                转载声明：文章采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可, 转载请注明出处 © <a href="https://jaredtao.github.io" target="_blank">武威的涛哥</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/2019/05/29/Qt实用技能2-用好qmake/" class="pre-post btn btn-default" title='Qt实用技能2-用好qmake'>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">Qt实用技能2-用好qmake</span>
        </a>
    
    
        <a href="/2019/05/22/Qml组件化编程8-Qml属性/" class="next-post btn btn-default" title='Qml组件化编程8-Qml属性'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">Qml组件化编程8-Qml属性</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'qegD4552u6FU9HoNDvRsonko-gzGzoHsz',
            appKey: 'eitB2FV5n2qyMHcDM7x6EQpt',
            placeholder: '说点什么吧',
            notify: false,
            verify: false,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: 'zh-CN'.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">文章目录</h3>
        
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#界面、数据和逻辑分离"><span class="toc-text">界面、数据和逻辑分离</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qt内置的Model-View"><span class="toc-text">Qt内置的Model-View</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#整数做model"><span class="toc-text">整数做model</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#关于delegate"><span class="toc-text">关于delegate</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#View与Repeater的区别"><span class="toc-text">View与Repeater的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ListModel"><span class="toc-text">ListModel</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#静态ListModel"><span class="toc-text">静态ListModel</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#动态ListModel"><span class="toc-text">动态ListModel</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#XmlListModel"><span class="toc-text">XmlListModel</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ObjectModel"><span class="toc-text">ObjectModel</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#C-导出Model"><span class="toc-text">C++导出Model</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#QList"><span class="toc-text">QList</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#QJsonArray"><span class="toc-text">QJsonArray</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#QQmlPropertyMap"><span class="toc-text">QQmlPropertyMap</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ListView缺失的灵魂"><span class="toc-text">ListView缺失的灵魂</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#搜索与排序"><span class="toc-text">搜索与排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#选中"><span class="toc-text">选中</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#拖拽"><span class="toc-text">拖拽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#特效"><span class="toc-text">特效</span></a></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
        访问量:
        <strong id="busuanzi_value_site_pv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
        &nbsp; | &nbsp;
        访客数:
        <strong id="busuanzi_value_site_uv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2019
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>




    <script src="/assets/tagcanvas.min.js?rev=2.9"></script>
    <script>
        var tagOption = {
            textColour: '#444', // 字体颜色
            outlineMethod: 'block', // 选中模式
            outlineColour: '#FFDAB9', // 选中模式的颜色
            interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
            textHeight: 13,
            outlineRadius: 3,
            freezeActive: true || '', // 选中的标签是否继续滚动
            frontSelect: true || '', // 不选标签云后部的标签
            initial: [0.1, -0.1],
            depth: 0.5,
            decel: 0.95,
            maxSpeed: 0.03,
            reverse: true || '', // 是否反向触发
            fadeIn: 500, // 进入动画时间
            wheelZoom: false || '' // 是否启用鼠标滚轮
        }
        TagCanvas.Start('tag-cloud-3d','',tagOption);
    </script>



    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash"></script>

</body>
</html>